
<template>
	<view class="User">
		<tabbar></tabbar>
		<view class="mt10">
			<view class="mx15 usertop"  @click="pushPage('/pages/Home/log')">
				<view class="f14 fwb white">{{address | addressStr}}</view>
				<view class="f12 mt5 lastime">上次登录：2021-01-12 14:56</view>
			</view>
			<view class="topfunc flex f12 text--center">
				<view class="flex-1" @click="pushPage('/pages/User/share')">
					<image src="../../static/user/u-2.png" class="funpic"></image>
					<view class="color21">邀请好友</view>
				</view>
				<view class="flex-1" @click="pushPage('/pages/User/setsafe')" >
					<image src="../../static/user/u-3.png" class="funpic"></image>
					<view class="color21">安全设置</view>
				</view>
				<view class="flex-1">
					<image src="../../static/user/u-4.png" class="funpic"></image>
					<view class="color21">帮助中心</view>
				</view>
				<view class="flex-1 por" @click="pushPage('/pages/Home/notice')" >
					<image src="../../static/user/u-5.png" class="funpic"></image>
					<view class="color21">消息中心</view>
					<view class="poa mesread f8">{{unread}}</view>
				</view>
			</view>
			<view class="devide"></view>
			<view class="btmbox">
				<view class="px10 fsb f16 white">
					<view class="fundbox fcc flex-justify-center" @click="pushPage('/pages/User/recharge')" >
						<image src="../../static/user/u-6.png" class="coinpic coinpic2"></image>
						<text>充币</text>
					</view>
					<view class="fundbox fcc flex-justify-center" @click="pushPage('/pages/User/transfer')">
						<image src="../../static/user/u-7.png" class="coinpic coinpic1"></image>
						<text>转账</text>
					</view>
				</view>
				<view class="mt10 coinbox">
					<view class="por color21 fwb fundtitle f14">我的财富</view>
					<view class="coincont">
						<view v-for="(item,index) in coinList" :key="index" class="fcc" @click="coinSwitch(index)">
							<image :src="item.funpic" class="coin"></image>
							<view class="flex-1 ml10 coinitem border1 fwb">
								<view class="fsb f16 color-defalut ">
									<text>{{item.name}}</text>
									<text class="mt3 ">${{item.number}}</text>
								</view>
								<view class="fsb mt3 color-gray f12 ">
									<text class="">${{item.rate}}</text>
									<text class="mt3">${{item.total}}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return {
				address:'assssssssssasasasa',
				unread:'9',
				data:[],
				coinList:[
					{name:'USDT-ERC20',rate:1,number:2.23560,total:2718.10,funpic:require('../../static/user/w-1.png')},
					{name:'STD',rate:6.91,number:2.23560,total:2718.10,funpic:require('../../static/user/w-2.png')},
					{name:'ETH',rate:42.15,number:2.23560,total:2718.10,funpic:require('../../static/user/w-3.png')},
					{name:'BTC',rate:10983.12,number:2.23560,total:2718.10,funpic:require('../../static/user/w-4.png')},
					{name:'STD-ERC20',rate:1,number:2.23560,total:27180.10,funpic:require('../../static/user/w-2.png')}
				]
			}
		},
		onShow(){
		},
		filters:{
			addressStr:function(str){
				let strStart = str.substring(0,4)
				let strEnd = str.substring(str.length-6,str.length)
				str = strStart +'...'+strEnd
				return str
			}
		},
		methods:{
			coinSwitch(index){
				uni.navigateTo({
					url:'coin?type='+index,
					animationType:'slide-in-right'
				})
			},
			async getData(){
				let { data } = await this.$http.post('home.index', {}, { isAuth: false, tipConfig: { isLoading: false } });
				this.data = data
			}
		}
	}
</script>

<style lang="less">
	.btmbox{
		padding: 32rpx 0;
		.coinbox{
			padding-left: 38rpx;
			letter-spacing: 0;
			.fundtitle::before{
				content: '';
				width: 8rpx;
				height: 32rpx;
				background-color: #308ae4;
				position: absolute;
				left: -20rpx;
				top:2rpx
			}
			.coin{
				width: 72rpx;
				height: 72rpx;
			}
			.coinitem{
				padding:30rpx 34rpx 30rpx 4rpx;
			}
		}
		.fundbox{
			width: 330rpx;
			height: 84rpx;
			background-color: #308ae4;
			border-radius: 8rpx;
			.coinpic{
				margin-right: 8rpx;
				height: 30rpx;
			}
			.coinpic2{
				width: 36rpx;
			}
			.coinpic1{
				width: 32rpx;
			}
		}
	}
	.border1{
		border-bottom: 2rpx solid #E5E5E5;
	}
	.color21{
		color: #212121;
	}
	.color-defalut{
		color: #272E3F;
	}
	.color-gray{
		color: #909399;
	}
	.usertop{
		background: url(../../static/user/u-1.png) no-repeat center;
		background-size: 100% 100%;
		padding: 36rpx 32rpx;
		.lastime{
			color:rgba(255,255,255,.8)
		}
	}
	.topfunc{
		padding:40rpx 20rpx;
		.funpic{
			width:60rpx;
			height:60rpx;
			margin-bottom: 8rpx;
		}
		.mesread{
			width:28rpx;
			height: 28rpx;
			line-height: 28rpx;
			background-color: #ff2424;
			text-align: center;
			color: #fff;
			border: 1px solid #ffffff;
			border-radius: 50%;
			top:-8rpx;
			right:52rpx;
		}
	}
	.devide{
		height: 16rpx;
		background-color: #f6f5f9;
	}
</style>